import { playListDetail, songDetail, collectPlayList } from "@/api/api";
import { global } from "@/mixin/global.js";
import PlayListDetailItem from "@/components/PlayListDetailItem"
import Navbar from "@/components/Navbar"
import axios from 'axios'

export default {
  name: 'PlayListDetailInclude',
  mixins: [global],
  components: {
    PlayListDetailItem,
    Navbar,
    // Navbar: () => import("@/components/Navbar"),
  },
  data() {
    return {
      // 歌单id
      plId: 0,
      // 歌单名
      playListName: '歌单',
      // 歌单里的歌曲的 id 组成的数组
      songsIds: [],
      // 歌单里的歌曲
      songList: [],
      // 歌单信息
      playList: {},
      // 每次加载 100 首歌
      len: 100,
      // 加载错误
      loadingError: false,
      // 是否正在加载数据, 正在加载(true), 则不触发 @load 事件加载数据, false则加载数据
      loadingData: true,
      // 是否已加载完全部数据
      finished: false,
      // 滚动定时器
      scrollTimer: null,
      // 粘性置顶高度
      navbarHeight: 0,
      // 是否显示返回顶部
      topFlag: false,
      // 订阅是否显示为灰色
      greyColor: false,
      // 弹出内容
      popUpShow: false,
      // 分享
      showShare: false,
      options: [
        [
          { name: '微信', icon: 'wechat' },
          { name: '朋友圈', icon: 'wechat-moments' },
          { name: '微博', icon: 'weibo' },
          { name: 'QQ', icon: 'qq' },
          { name: '分享海报', icon: 'poster' },
          { name: '小程序码', icon: 'weapp-qrcode' },
        ],
        [
          { name: '复制链接', icon: 'link' },
          { name: '二维码', icon: 'qrcode' },
        ],
      ],
      // 是否触摸
      isTouch: false,
      scrollHeight: 0
    }
  },
  computed: {
    // 歌单是否收藏过
    subscribed() {
      if (this.loginStatus) {
        return this.playList.subscribed
      }
      // 没登录过直接返回false
      return false
    },
    // 是否是自己创建的歌单
    myPlayList() {
      if (this.loginStatus) {
        // 如果登录过, 判断创建者id是否与用户id相同
        return this.playList.creator && this.playList.creator.userId === this.$store.getters.userInfo.userId
      }
      return false
    },
    description() {
      return this.playList.description && this.playList.description.replace(/\n/g, '<br>')
    },
    // playlistId() {
    //   return this.$route.params.id
    // },
    playListLen() {
      return this.$store.getters.playList.length
    },
    plBgi () {
      return this.playList.coverImgUrl ? this.playList.coverImgUrl : ''
    }
  },
  mounted() {
    // console.log(this.$refs.navbar); 
    // undefined, 因为使用异步组件的写法, mounted时未完成加载, 直接获取得不到, 用 setInterval, 100ms获取一次, 得到后清除定时器, 或是在子组件里 mounted emit 表示已经加载好了, 或是别写异步组件的写法
    this.getNavbarHeight()
    // this.navbarMounted()
    this.getEleAttr()

    window.addEventListener('scroll', this.handlerScroll)
    this.$refs.playlistDetailEl.addEventListener('touchstart', this.touchS)
    this.$refs.playlistDetailEl.addEventListener('touchend', this.touchE)
  },
  activated() {
    this.plId = this.$route.params.id
    setTimeout(() => {
      window.scroll(0, this.scrollHeight)
      this.handlerScroll()
      window.addEventListener('scroll', this.handlerScroll)
    }, 10)
  },
  deactivated() {
    // 此处数值有问题, 在滚动事件处记录
    // this.scrollHeight = Math.ceil(this.getScrollTop())
    // console.log('deactive scrollHeight', this.scrollHeight);
    window.removeEventListener('scroll', this.handlerScroll)
  },
  // destroyed() {
  //   console.log('destroy');
  //   window.removeEventListener('scroll', this.handlerScroll)
  //   window.removeEventListener('touchstart', this.touchS)
  //   window.removeEventListener('touchend', this.touchE)
  // },
  methods: {
    // 初始化数据
    async initData(id) {
      try {
        this.playList = {}
        this.songList = []
        this.songsIds = []
        this.playListName = ''
        this.finished = false
        this.loadingData = true
        let pl = await playListDetail(id)
        this.playList = pl.playlist;
        // 把里面歌曲 id 提取出来
        this.songsIds = this.playList.trackIds.map(item => item.id)
        // 等拿到所有歌曲 id 才可触发 @load 事件
        this.loadingData = false
      } catch (error) {
        console.log(error);
      }
    },
    // 加载数据, 每次获取 this.len 首歌曲的详细信息
    async getSongs() {
      try {
        let ids = this.songsIds.slice(this.songList.length, this.songList.length + this.len).join(",")
        let songList = await songDetail(ids)
        this.songList.push(
          ...songList.songs.map((item, index) => {
            return {
              id: item.id,
              name: item.name,
              secName: item.tns ? item.tns[0] : item.alia[0],
              artist: item.ar.map(item1 => item1.name).join('/'),
              al: item.al.name,
              mvId: item.mv,
              duration: item.dt / 1000,
              bgImg: item.al.picUrl + '?param=400y400',
              sq: songList.privileges[index].maxbr >= 999000,
            }
          })
        )
        this.loadingData = false
        if (this.songList.length >= this.songsIds.length) {
          this.finished = true
        }
        // console.log(this.songList);
      } catch (error) {
        console.log(error);
        this.loadingError = true
      }
    },
    // 获取一些需要的dom及属性值
    getEleAttr() {
      // 导航条
      this.navEle = this.$refs.navbar.$el
      // 导航条背景
      this.navBgEle = this.$refs.navbarBg
      // 歌单描述内容
      this.descriptionEle = this.$refs.description
      // 歌单描述的背景
      this.detailBgEle = this.$refs.detailBg
      // 订阅 评论 分享
      this.playlistBarEle = this.$refs.playlistBar
      // 歌单列表
      this.playlistEle = this.$refs.playlist
      // 导航条高度
      this.navH = this.navEle.offsetHeight
      // 粘性置顶高度
      this.navbarHeight = this.navH + 'px'
      // 订阅 评论 分享 距离顶部高度
      this.playlistBarT = this.playlistBarEle.getBoundingClientRect().top
      // 歌单列表 距离顶部高度
      this.playlistT = this.playlistEle.getBoundingClientRect().top
    },
    // 滚动处理
    handlerScroll(e) {
      // if (this.$route.name === 'PlayListDetail') {
        this.scrollT = Math.ceil(this.getScrollTop())
        this.scrollHeight = this.scrollT
        // console.log('滚动:', this.scrollT);
        // 显示/隐藏回到顶部
        if (this.scrollT > this.playlistT * 3) {
          this.topFlag = true
        } else {
          this.topFlag = false
        }
  
        // 导航条背景图 透明度, 描述背景图弧形边框
        if (this.scrollT <= this.playlistT - this.navH) {
          let opacity = +(this.scrollT / (this.playlistT - this.navH)).toFixed(2)
          opacity = opacity >= 1 ? 1 : opacity
          this.navBgEle.style.opacity = opacity
          let r = 50 - 18 * opacity
          // console.log(r);
          this.detailBgEle.style.borderRadius = `0 0 ${r}% ${r}%`
        } else {
          this.navBgEle.style.opacity = 1
        }
        
        if (this.scrollT <= this.playlistT) {
          // console.log('----------------');
  
          // 滚动高度小于 navbar 高度
          if (this.scrollT >= 0 && this.scrollT <= this.navH) {
            this.playListName = '歌单'
            this.descriptionEle.style.opacity = 1
          }
  
          // 描述内容 透明度
          if (this.scrollT >= this.navH && this.scrollT <= this.playlistT - this.navH) {
            this.playListName = this.playList.name
            let opacity = +((this.scrollT - this.navH) / this.descriptionEle.offsetHeight).toFixed(2)
            opacity = opacity >= 1 ? 1 : opacity
            this.descriptionEle.style.opacity = 1 - opacity
          }
          
          // 订阅 评论 分享 透明度
          if (this.scrollT >= this.playlistBarT - this.navH * 1.5 && this.scrollT <= this.playlistT - this.navH ) {
            let opacity = +(this.scrollT - (this.playlistBarT - this.navH * 1.5)) / (this.playlistT - (this.playlistBarT - this.navH * 0.5)).toFixed(2)
            // console.log(opacity);
            opacity = opacity >= 1 ? 1 : opacity
            this.playlistBarEle.style.opacity = 1 - opacity
          } else if (this.scrollT > this.playlistT - this.navH) {
            this.playlistBarEle.style.opacity = 0
          } else if (this.scrollT < this.playlistBarT - this.navH * 1.5) {
            this.playlistBarEle.style.opacity = 1
          }
        }
  
        if (!this.isTouch) {
          this.scrollT = Math.ceil(this.getScrollTop())
          this.sTimer && clearTimeout(this.sTimer)
          this.sTimer = setTimeout(() => {
            if (this.scrollT > 0 && this.scrollT < this.navH) {
              window.scroll({top: 0, behavior: 'smooth'})
            }
            if (this.scrollT > this.navH && this.scrollT < (this.playlistT - this.navH)) {
              window.scroll({top: (this.playlistT - this.navH), behavior: 'smooth'})
            }
          }, 100)
        }
      // }

    },
    touchS() {
      this.isTouch = true
    },
    touchE() {
      this.isTouch = false
      this.handlerScroll()
    },
    // 播放全部
    playAll() {
      if (this.songList.length) {
        this.$store.commit('setPlayList', this.songList)
        this.toast(`即将播放歌单中已加载的歌曲!`, 3000)
        this.clickSong(this.songList[0].id)
      } else {
        this.toast('歌曲还未加载完成!')
      }
    },
    // 处理订阅
    async handlerSubscribe() {
      // 未登录, 提示去登录
      if (!this.loginStatus) {
        this.$dialog
          .confirm({
            title: "收藏歌单",
            message: "需要登录才能收藏哦!",
            confirmButtonText: "确定",
          })
          .then((res) => {
            this.$store.commit("saveRedirect", this.$route.path);
            this.$router.replace({ name: "Login" });
          })
          .catch((err) => {
            console.log("取消", err);
          });
      }
      // 已登录且不是自己创建的歌单
      if (this.loginStatus && !this.myPlayList) {
        this.$store.commit('changeLoading', true)
        let type = 1
        // 1 收藏  2 取消
        this.playList.subscribed ? type = 2 : type = 1
        try {
          let collect = await collectPlayList({ id: this.playList.id, t: type })
          console.log(collect);
          if (collect.code === 200) {
            this.playList.subscribed = !this.playList.subscribed
            type === 1 ? this.playList.subscribedCount++ : this.playList.subscribedCount--
          } else {
            this.$toast('收藏错误, 请重试!')
          }
          this.$store.commit('changeLoading', false)
        } catch (error) {
          this.$toast('收藏错误, 请重试!')
          console.log(error);
        } finally {
          this.$store.commit('changeLoading', false)
        }
      }
    },
    // 前往歌单评论页 
    goComment() {
      this.$router.push({name: 'PlayListComment', params: {id: this.plId}})
    },
    // 点击分享选项
    onSelect(option) {
      this.showShare = false;
      if (option.name === '复制链接') {
        this.copyText(window.location.href)
      }
    },
    // 弹出内容
    popUpDetail() {
      this.popUpShow = true
    },
    clickPopUp() {
      this.popUpShow = !this.popUpShow
    },
    // 保存封面
    async downloadImg(imageSrc) {
      this.$toast({
        message: `开始下载!`,
        position: "bottom",
      });
      
      const suffix = this.playList.coverImgUrl.split('.').slice(-1)[0]
      const fileName = `${this.playList.name}.${suffix}`

      // const link = document.createElement('a')
      // link.href = imageSrc
      // link.download = fileName
      // link.click()
      
      // 以blob格式请求图片
      let {data} = await axios({
        url: imageSrc,
        responseType: 'blob'
      })
      // 返回一个字符串url, 该URL可用于指定源object的内容
      const imgData = URL.createObjectURL(data)
      const link = document.createElement('a')
      link.href = imgData
      link.download = fileName
      link.click()

      // base64
      // let suffix = this.playList.coverImgUrl.split('.').slice(-1)[0]
      // let filename = `${this.playList.name}.${suffix}`
      // let imgUrl = this.playList.coverImgUrl
      // let image = new Image();
      // image.src = imgUrl;
      // // 解决跨域 Canvas 污染问题
      // image.setAttribute("crossOrigin", "anonymous");
      // image.onload = function() {
      //   let canvas = document.createElement("canvas");
      //   canvas.width = image.width;
      //   canvas.height = image.height;
      //   let context = canvas.getContext("2d");
      //   context.drawImage(image, 0, 0, image.width, image.height);
      //   let url = canvas.toDataURL(); //得到图片的base64编码数据
      //   let a = document.createElement("a"); // 生成一个a元素
      //   let event = new MouseEvent("click"); // 创建一个单击事件
      //   a.download = filename || "photo"; // 设置图片名称
      //   a.href = url; // 将生成的URL设置为a.href属性
      //   a.dispatchEvent(event); // 触发a的单击事件
      // };
      
    },
    // 在mounted用refs获取子组件时, 如果无法直接获取到
    navbarMounted() {
      this.navbarHeight = this.$refs.navbar.$el.offsetHeight+'px'
    },
    getNavbarHeight() {
      this.navbarTimer = setInterval(() => {
        let navbar = this.$refs.navbar
        if (navbar) {
          this.navbarHeight = navbar.$el.offsetHeight + 'px'
          clearInterval(this.navbarTimer)
        }
      }, 100)
    }
  },
  watch: {
    popUpShow(newV) {
      if (newV) {
        // document.querySelector('body').style.overflow = 'hidden'
        document.querySelector('.playlist-detail-page').style.overflow = 'hidden'
        document.querySelector('.playlist-detail-page').style.height = window.innerHeight + 'px'
      } else {
        // document.querySelector('body').style.overflow = ''
        document.querySelector('.playlist-detail-page').style.overflow = ''
        document.querySelector('.playlist-detail-page').style.height = ''
      }
    },
    // 直接在url输入新的歌单id
    playlistId(newV, oldV) {
      console.log(newV, oldV);
      // if (newV == oldV) {
      //   // this.initData()
      // }
    },
    '$route.params.id': {
      handler: function(newV, oldV) {
        if (newV && this.$route.name == 'PlayListDetail' && newV != this.plId) {
          this.initData(newV)
        }
      },
      immediate: true
    },
    loadingData(newV) {
      // console.log('是否加载数据中', newV);
    }
  },
  beforeRouteLeave (to, from, next) {
    // 直接按返回键
    if (this.popUpShow) {
      console.log(this.popUpShow);
      this.popUpShow = false
      next(false)
    } else {
      next()
    }
  }
  
}